@import "shared";
@import "reset";

.scastie {
  @include reset();

  .console-container {
    .run-button {
      margin-right: auto;
      text-align: left;

      background: #54A1CC;

      line-height: 25px;
      min-width: 50px;

      padding: 0px 16px 0px 8px;
      margin: 4px 0px 4px 4px;
      border-radius: 15px;
    }

    .run-button:hover {
      background-color: #267CAC
    }
  }


  .embedded-overlay {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;

    list-style: none;

    margin: 10px;

    .fa {
      font-size: 1.5em;
      padding: 5px;
    }
  }
}

@mixin embeddedMenuStyle($class) {
  .scastie {
    .app.#{$class} {
      .embedded-overlay {
        & > * {
          color: $editor-button-color;
          background-color: $embedded-overlay-button-background;
          border-radius: 10px;
        }
        & > *:hover {
          background-color: $embedded-overlay-button-background-hover;
        }
      }
    }
  }
}


@import "dark-embedded";
@import "light-embedded";

